iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
0
自我挑戰組

JS30自我學習筆記系列 第 27

第二十六堂 - Stripe Follow Along Nav

  • 分享至 

  • xImage
  •  

今天的實作是接續第二十二堂的Follow Along Link Highlighter,算是他的進階版。而我們要做的效果是個非常常見且實用又美觀的下拉選單,他可以隨著滑鼠在導覽列移動到不同標籤時,根據其選單內容產生不同形狀大小的框框,實作範例如下:

Imgur

邏輯流程

  1. 建立導覽列元素的mouseenter和mouseleave監聽
  2. mouseenter時將元素加入顯示內容之CSS樣式
  3. mouseleave時將加入之CSS樣式移除
  4. 抓取元素之長寬及邊界之XY值
  5. 利用上步驟結果,設定白色框背景的長寬及位置

課程重點

  1. 箭頭函式:影片中在setTimeout那段的Code原本一開始是寫
    function handleEnter() {
    	setTimeout(fuction(){
    	    this.classList.add('trigger-enter-active')
    	}, 150);
    }
    triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
    
    但這邊的this是回傳一個window,因此我們可以利用ES6綁定this的特色,將函式改為用箭頭函式來寫,這時this就會是這個mouseenter的元素。
  2. getBoundingClientRect():在這堂的前導課程也有用過,是用來得到元素的邊界坐標值及長寬等屬性。

上一篇
第二十五堂 - Event Capture, Propagation, Bubbling and Once
下一篇
第二十七堂 - Click and Drag
系列文
JS30自我學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言